import { watchEffect, ref, createVNode } from 'vue';
import Image from '@/components/Image';
import { TEMPLATE_PROP, DEPRECATED_TEMPLATE_PROP } from '@/constants/htmlparse';
// import PreviewImage from '@/components/PreviewImage';
import { parseHTML, formatProps, decodeHTMLEntities } from './htmlParseUtils';
import Video from '../components/Video';
import Audio from '../components/Audio';
export default {
  props: {
    html: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const htmlNode = ref([]);

    const picArr = ref([]);

    function compileHtmlTree(htmlString) {
      const nodes = parseHTML(decodeHTMLEntities(htmlString));
      return nodes.map(getComponent);
    }

    function preview(src) {
      wx.previewImage({
        current: src, // 当前显示图片的http链接
        urls: picArr.value // 需要预览的图片http链接列表
      });
    }

    function getEditorTemplate(data, templateCode) {
      const resourceProps = {
        src: data[TEMPLATE_PROP.FILE_URL],
        title: data[TEMPLATE_PROP.FILE_NAME],
        key: data.key
      };
      switch (templateCode) {
        case 'audio':
          // resourceProps.duration = data[TEMPLATE_PROP.FILE_DURATION];
          return <Audio {...resourceProps} />;

        case 'video':
          resourceProps.poster = `${
            data[TEMPLATE_PROP.FILE_URL]
          }?x-oss-process=video/snapshot,t_0,f_jpg,w_682,h_386,m_fast`;
          return <Video {...resourceProps} />;
      }

      return null;
    }

    // 旧版废弃的音视频模板，暂时保留做兼容
    function getDeprecatedTemplateCode(props, templateCode) {
      const resourceProps = {
        src: props[DEPRECATED_TEMPLATE_PROP.FILE_URL],
        title: decodeURIComponent(props[DEPRECATED_TEMPLATE_PROP.FILE_NAME]),
        key: props.key
      };
      switch (templateCode) {
        case 'WTDC-EDITOR-AUDIO':
          return <Audio {...resourceProps} />;

        case 'WTDC-EDITOR-VIDEO':
          resourceProps.poster = props[DEPRECATED_TEMPLATE_PROP.FILE_POSTER];
          return <Video {...resourceProps} />;
      }

      return null;
    }

    function getComponent(tag = {}) {
      const { tagName = '', propStr = '', children = [], content = '' } = tag;
      const childrenComponents = children.length ? children.map(getComponent) : null;

      if (tagName) {
        const props = formatProps(propStr);

        const templateCode = props[TEMPLATE_PROP.TEMPLATE_CODE];

        const deprecatedTemplateCode = props[DEPRECATED_TEMPLATE_PROP.TEMPLATE_CODE];

        switch (true) {
          case tagName === 'img':
            picArr.value.push(props.src);
            return <Image src={props.src} onClick={() => preview(props.src)} />;

          case tagName === 'a':
            return <a {...props}>{childrenComponents}</a>;

          case tagName === 'p':
            return <div {...props}>{childrenComponents}</div>;

          case tagName === 'section': {
            props.class = 'html-w100';
            return <section {...props}>{childrenComponents}</section>;
          }

          case tagName === 'div' && !!templateCode:
            return getEditorTemplate(props, templateCode);

          // 兼容旧版废弃的iframe模板
          case tagName === 'iframe' && !!deprecatedTemplateCode:
            return getDeprecatedTemplateCode(props, deprecatedTemplateCode);

          default: {
            return createVNode(tagName, { ...props }, childrenComponents);
          }
        }
      } else {
        return content;
      }
    }

    watchEffect(() => {
      if (props.html) {
        let htmlNodes = compileHtmlTree(props.html);
        htmlNode.value = htmlNodes;
      }
    });

    return () => {
      return <div class='HtmlParse'>{htmlNode.value.map((item) => item)}</div>;
    };
  }
};
